<template>
	<div class="login flex-center flex-items-center">
		<div class="login-input">
			<H2 class="px32 text-center text-bold">{{ systemTitle }} 登 录</H2>
			<el-divider></el-divider>
			<br />
			<el-form size="medium" :model="form" :rules="rules" ref="form">
				<!-- <el-form-item prop="username">
					<el-input
						v-model="form.username"
						placeholder="请输入用户名"
						@keyup.enter.native="submitLogin"
					></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input
						type="password"
						v-model="form.password"
						placeholder="请输入密码"
						@keyup.enter.native="submitLogin"
					></el-input>
				</el-form-item> -->
				<!-- <el-form-item prop="validateCode">
					<el-row :gutter="20">
						<el-col :span="14">
							<el-input
								v-model="form.validateCode"
								placeholder="验证码"
								@keyup.enter.native="submitLogin"
							></el-input>
						</el-col>
						<el-col :span="10">
							<img :src="captcha" alt="" @click="getCaptcha" width="100%" />
						</el-col>
					</el-row>
				</el-form-item> -->
				<!-- <el-form-item>
					<el-button round style="width: 100%;" type="primary" @click="submitLogin">
						登录
					</el-button>
				</el-form-item> -->
				<el-form-item>
					<a :href="redirect">
						<el-button round style="width: 100%;" type="primary">企业微信授权登录</el-button>
					</a>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
	name: 'Login',
	data() {
		return {
			systemTitle: document.title,
			redirect: `https://open.work.weixin.qq.com/wwopen/sso/qrConnect?appid=wwf6fa938b3a9abe6f&agentid=1000005&redirect_uri=http://3m14n92124.qicp.vip&state=STATE`,
			captcha: `${this.$BASE_URL}/captcha/captchaImage?type=math&x=${Math.random()}`,
			form: {},
			rules: {
				username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
				password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
				validateCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
			}
		}
	},
	created() {
		// console.log(this.$route)
	},
	methods: {
		...mapActions(['handleLoginStatus']),
		getCaptcha() {
			this.captcha = `${this.$BASE_URL}/captcha/captchaImage?type=math&x=${Math.random()}`
		},
		submitLogin() {
			this.$refs['form'].validate(async valid => {
				if (valid) {
					try {
						const { username, password, validateCode } = this.form
						const result = await this.handleLoginStatus({ username, password, validateCode })
						if (result) {
							this.$nextTick(() => {
								this.$router.replace({ path: this.redirect })
							})
						}
					} catch (error) {
						this.$notify.error({ title: '登录错误', message: '登录失败，请检查' })
					}
				}
			})
		}
	}
}
</script>

<style lang="scss">
.login {
	width: 100%;
	height: calc(100vh - 150px);
	border-radius: 8px;
	-webkit-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
	box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
	background: #fff;
	.login-input {
		width: 25vw;
		box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
		padding: 6vh 3vw;
	}
}
</style>
